import React, { Component } from 'react'
import {Link,Route,Routes,HashRouter,BrowserRouter, NavLink} from 'react-router-dom'
import About from './About'
import Home from './Home'
import Pages from './Pages'
import News from './Pages/News'
import Message from './Pages/Message'
import User from './Pages/User'
export default class Nav extends Component {
    render() {
        return (
            <div>
                {/* <BrowserRouter>
                    <Link to="/about">About</Link>
                    <Link to="/home">Home</Link>
                    <div>
                        <Routes>
                            <Route path="/about" element = {<About/>}/>
                            <Route path="/home" element = {<Home/>}/>
                            
                        </Routes>
                    </div>
                </BrowserRouter> */}

                {/* <HashRouter>
                    <Link to="/about">About</Link>
                    <Link to="/home">Home</Link>
                    <div>
                        <Routes>
                            <Route path="/about" element = {<About/>}/>
                            <Route path="/home" element = {<Home/>}/>
                        </Routes>
                    </div>
                </HashRouter> */}


                {/* <HashRouter>
                    <NavLink to="/about">About</NavLink>
                    <NavLink to="/home">Home</NavLink>
                    <div>
                        <Routes>
                            <Route path="/about" element = {<About/>}/>
                            <Route path="/home" element = {<Home/>}/>
                        </Routes>
                    </div>
                </HashRouter> */}


                {/* Routes Switch 可以限制重名只显示一个 */}
                {/* <HashRouter>
                    <NavLink to="/about">About</NavLink>
                    <NavLink to="/home">Home</NavLink>
                    <div>
                        <Routes>
                            <Route path="/about" element = {<About/>}/>
                            <Route path="/about" element = {<About/>}/>
                            <Route path="/home" element = {<Home/>}/>
                        </Routes>
                    </div>
                    <div>
                        <Routes>
                            <Route path="/about" element = {<About/>}/>
                            <Route path="/home" element = {<Home/>}/>
                        </Routes>
                    </div>
                </HashRouter> */}
               
               {/* 多级路由 */}

                <NavLink to="/about">About</NavLink>
                <NavLink to="/home">Home</NavLink>
                <NavLink to="/pages">Pages</NavLink>
                <NavLink to="/user?name=111">Query</NavLink>
                <div>
                    <Routes>
                        <Route path="/about" element = {<About/>}/>
                        <Route path="/home" element = {<Home/>}/>
                        <Route path="/pages" element = {<Pages/>}>
                            <Route path="news" element = {<News/>}/>
                            <Route path="message/:id" element = {<Message/>}/>
                        </Route>
                        <Route path="/user" element = {<User/>}/>
                    </Routes>
                </div>

            </div>
        )
    }
}
